<!--
* @author wn
* @date 2022/09/07 15:55:29
* @description: 订单详情页 为嵌套路由 主要为了 激活 css
!-->
<template>
	<div class="order-detail" v-if="orderDetail">
		<!-- 头部组件 -->
		<detail-head :order="orderDetail" />
		<!-- 步长组件 -->
		<detail-step :order="orderDetail" />
		<!-- 物流组件  采用  suspense  使该组件 晚于 setup -->
		<suspense>
			<template #default>
				<detail-logistics :order="orderDetail" />
			</template>
			<template #fallback>
				<div class="loading">loading</div>
			</template>
		</suspense>
		<!-- 订单信息组件 -->
		<detail-info :order="orderDetail" />
	</div>
</template>
<script>
import { useRoute } from 'vue-router'
import DetailHead from './components/DetailHead'
import DetailStep from './components/DetailStep'
import DetailLogistics from './components/DetailLogistics'
import DetailInfo from './components/DetailInfo'
import { findOrderDetail } from '@/network/order'
import { ref } from 'vue'

export default {
	name: 'OrderDetail',
	components: { DetailHead, DetailStep, DetailLogistics, DetailInfo },
	setup() {
		// 获取  order
		const route = useRoute()
		const orderDetail = ref(null)
		findOrderDetail(route.params.id).then(({ result }) => {
			orderDetail.value = result
		})
		return { orderDetail }
	},
}
</script>
<style scoped lang="less">
.order-detail {
	height: 100%;
	background-color: #fff;
}
.loading {
	height: 50px;
	line-height: 50px;
	text-align: center;
	padding: 0 30px;
	margin: 30px 50px 0;
	background: #f5f5f5 url(~@/assets/images/loading.gif) no-repeat 360px /
		contain;
}
</style>
